<template>
  <el-table-column
    v-if="column.children && column.children.length > 0"
    :label="column.label"
    :align="column.align || 'center'"
  >
      <WColumn :column="item" v-for="(item, key) of column.children" :key="key">
        <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
          <slot :name="slot" v-bind="scope"></slot>
        </template>
      </WColumn>
  </el-table-column>
  <el-table-column
    v-else
    :prop="column.prop"
    :label="column.label"
    :width="column.width || ''"
    :align="column.align || 'center'"
    :show-overflow-tooltip="column.tooltip?column.tooltip:isEdit?false:true"
  >
    <template slot-scope="scope">
      <div v-if="column.slotFlag && $scopedSlots[column.prop]">
        <slot :name="column.prop" v-bind="scope.row"></slot>
      </div>
      <div v-else>
        <el-input
          v-if="isEdit"
          v-model="scope.row[column.prop]"
          placeholder=""
          size="small"
        ></el-input>
        <span v-else>{{ scope.row[column.prop] }}</span>
      </div>
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: "WColumn",
  inject: ["isShow"],
  props: {
    column: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    isEdit() {
      return this.isShow();
    }
  }
};
</script>
